<template>
    <li class="hl-tab-item" @click="$emit('click')">
        <i class="amds" :class="icon"></i>
        <label class="label">{{label}}</label>
    </li>
</template>

<script>
    export default {
        name: "hl-tab-item",
        props: {
            icon: {
                type: String,
                default: ''
            },
            label: {
                type: String,
                default: ""
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../assets/theme";
    .hl-tab-item {
        flex: 1;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &:active {
            background: darken(#fff,5%);
        }
        &.active {
            color: @app-color;
        }
        .amds {
            font-size: 24PX;
        }
        .label {
            margin-top: 12px;
            font-size: 14PX;
        }
    }
</style>